<template>
  <div>
    <div class="class_mid">
          <van-nav-bar
      class="nav"
      :title="detail.testpapername"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      style="width:100%"
    />
    </div>
    <div class="two" v-if="dataisshow">
      <div>
        <img :src="'http://upenglish.ayvvv.cn' + detail.testpaperimage" alt="" class="img">
        <span class="zou">{{ detail.settime | dateFormat }}</span>
      </div>
      <div class="box">
      <!-- 听力 -->
        <div>
          <h3 class="questiontype">{{ tingliList.bigproblemname }}</h3>
          <div>
            <span class="okscore">{{ tingliList.score }}</span>
            <div class="audio_a">
              <div class="audio">
                <audio controls="controls" ref="audio" @click="play" :src="'http://upenglish.ayvvv.cn' + tingliList.stemcontent">
                </audio>
              </div>
            </div>
            <div v-for="item in tingliList.bigproblemoqoa" :key="item.id">
                <p class="tit">{{ item.question }}</p>
                <div class="moreselect">
                  <p v-if="item.aoption" :class="item.useranswer === 'A' ? 'p1' : 'p2'">A.&nbsp;&nbsp;&nbsp;{{ item.aoption }}</p>
                  <p v-if="item.boption" :class="item.useranswer === 'B' ? 'p1' : 'p2'">B.&nbsp;&nbsp;&nbsp;{{ item.boption }}</p>
                  <p v-if="item.coption" :class="item.useranswer === 'C' ? 'p1' : 'p2'">C.&nbsp;&nbsp;&nbsp;{{ item.coption }}</p>
                  <p v-if="item.doption" :class="item.useranswer === 'D' ? 'p1' : 'p2'">D.&nbsp;&nbsp;&nbsp;{{ item.doption }}</p>
                </div>
                <div v-if="item.istrue === 0" class="answer">
                  <span>正确答案：{{ item.answer }}</span>
                  <p v-html="item.analysiscontent"></p>
                </div>
              </div>
          </div>
        </div>
        <!-- 选择 -->
        <div>
          <h3 class="questiontype">{{ xuZeList.bigproblemname }}</h3>
          <div>
            <span class="okscore">{{ xuZeList.score }}</span>
            <div>
              <p v-html="xuZeList.stemcontent"></p>
              <div v-for="item in xuZeList.bigproblemoqoa" :key="item.id">
                <p>{{ item.question }}</p>
                <div class="moreselect">
                  <p v-if="item.aoption" :class="item.useranswer === 'A' ? 'p1' : 'p2'">A.&nbsp;&nbsp;&nbsp;{{ item.aoption }}</p>
                  <p v-if="item.boption" :class="item.useranswer === 'B' ? 'p1' : 'p2'">B.&nbsp;&nbsp;&nbsp;{{ item.boption }}</p>
                  <p v-if="item.coption" :class="item.useranswer === 'C' ? 'p1' : 'p2'">C.&nbsp;&nbsp;&nbsp;{{ item.coption }}</p>
                  <p v-if="item.doption" :class="item.useranswer === 'D' ? 'p1' : 'p2'">D.&nbsp;&nbsp;&nbsp;{{ item.doption }}</p>
                </div>
                <div v-if="item.istrue === 0" class="answer">
                  <span>正确答案：{{ item.answer }}</span>
                  <p v-html="item.analysiscontent"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 判断 -->
        <div>
          <h3 class="questiontype">{{ panDuanList.bigproblemname }}</h3>
          <div>
            <span class="okscore">{{ panDuanList.score }}</span>
            <div>
              <p  class="tit" v-html="panDuanList.stemcontent"></p>
              <div v-for="item in panDuanList.bigproblemoqoa" :key="item.id">
                <p>{{ item.question }}</p>
                <div class="moreselect">
                  <p v-if="item.aoption" :class="item.useranswer === 'A' ? 'p1' : 'p2'">A.&nbsp;&nbsp;&nbsp;{{ item.aoption }}</p>
                  <p v-if="item.boption" :class="item.useranswer === 'B' ? 'p1' : 'p2'">B.&nbsp;&nbsp;&nbsp;{{ item.boption }}</p>
                  <p v-if="item.coption" :class="item.useranswer === 'C' ? 'p1' : 'p2'">C.&nbsp;&nbsp;&nbsp;{{ item.coption }}</p>
                  <p v-if="item.doption" :class="item.useranswer === 'D' ? 'p1' : 'p2'">D.&nbsp;&nbsp;&nbsp;{{ item.doption }}</p>
                </div>
                <div v-if="item.istrue === 0" class="answer">
                  <span>正确答案：{{ item.answer }}</span>
                  <p v-html="item.analysiscontent"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 阅读 -->
        <div>
          <h3 class="questiontype">{{ yueDuList.bigproblemname }}</h3>
          <div>
            <span class="okscore">{{ yueDuList.score }}</span>
            <div>
              <p class="tit" v-html="yueDuList.stemcontent"></p>
              <div v-for="item in yueDuList.bigproblemoqoa" :key="item.id">
                <p>{{ item.question }}</p>
                <div class="moreselect">
                  <p v-if="item.aoption" :class="item.useranswer === 'A' ? 'p1' : 'p2'">A.&nbsp;&nbsp;&nbsp;{{ item.aoption }}</p>
                  <p v-if="item.boption" :class="item.useranswer === 'B' ? 'p1' : 'p2'">B.&nbsp;&nbsp;&nbsp;{{ item.boption }}</p>
                  <p v-if="item.coption" :class="item.useranswer === 'C' ? 'p1' : 'p2'">C.&nbsp;&nbsp;&nbsp;{{ item.coption }}</p>
                  <p v-if="item.doption" :class="item.useranswer === 'D' ? 'p1' : 'p2'">D.&nbsp;&nbsp;&nbsp;{{ item.doption }}</p>
                </div>
                <div v-if="item.istrue === 0" class="answer">
                  <span>正确答案：{{ item.answer }}</span>
                  <p v-html="item.analysiscontent"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 阅读 -->
        <div>
          <h3 class="questiontype">{{ yueDuList1.bigproblemname }}</h3>
          <div>
            <span class="okscore">{{ yueDuList1.score }}</span>
            <div>
              <p class="tit" v-html="yueDuList1.stemcontent"></p>
              <div v-for="item in yueDuList1.bigproblemoqoa" :key="item.id">
                <p>{{ item.question }}</p>
                <div class="moreselect">
                  <p v-if="item.aoption" :class="item.useranswer === 'A' ? 'p1' : 'p2'">A.&nbsp;&nbsp;&nbsp;{{ item.aoption }}</p>
                  <p v-if="item.boption" :class="item.useranswer === 'B' ? 'p1' : 'p2'">B.&nbsp;&nbsp;&nbsp;{{ item.boption }}</p>
                  <p v-if="item.coption" :class="item.useranswer === 'C' ? 'p1' : 'p2'">C.&nbsp;&nbsp;&nbsp;{{ item.coption }}</p>
                  <p v-if="item.doption" :class="item.useranswer === 'D' ? 'p1' : 'p2'">D.&nbsp;&nbsp;&nbsp;{{ item.doption }}</p>
                </div>
                <div v-if="item.istrue === 0" class="answer">
                  <span>正确答案：{{ item.answer }}</span>
                  <p v-html="item.analysiscontent"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 阅读 -->
        <div>
          <h3 class="questiontype">{{ yueDuList2.bigproblemname }}</h3>
          <div>
            <span class="okscore">{{ yueDuList2.score }}</span>
            <div>
              <p class="tit" v-html="yueDuList2.stemcontent"></p>
              <div v-for="item in yueDuList2.bigproblemoqoa" :key="item.id">
                <p>{{ item.question }}</p>
                <div class="moreselect">
                  <p v-if="item.aoption" :class="item.useranswer === 'A' ? 'p1' : 'p2'">A.&nbsp;&nbsp;&nbsp;{{ item.aoption }}</p>
                  <p v-if="item.boption" :class="item.useranswer === 'B' ? 'p1' : 'p2'">B.&nbsp;&nbsp;&nbsp;{{ item.boption }}</p>
                  <p v-if="item.coption" :class="item.useranswer === 'C' ? 'p1' : 'p2'">C.&nbsp;&nbsp;&nbsp;{{ item.coption }}</p>
                  <p v-if="item.doption" :class="item.useranswer === 'D' ? 'p1' : 'p2'">D.&nbsp;&nbsp;&nbsp;{{ item.doption }}</p>
                </div>
                <div v-if="item.istrue === 0" class="answer">
                  <span>正确答案：{{ item.answer }}</span>
                  <p v-html="item.analysiscontent"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { hisoryed } from '@/api/question.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      detail: [],
      testpaperresult: [],
      xuZeList: [],
      panDuanList: [],
      yueDuList: [],
      tingliList: [],
      xuZeradio: [],
      panDuanradio: [],
      yueDuradio: [],
      tingliradio: [],
      arrayDataFile: [],
      shijuan: [],
      yueDuList1: [],
      yueDuList2: [],
      yueDuradio1: [],
      yueDuradio2: [],
      allTime: '',
      dataisshow: false
    }
  },

  created () {
    this.getexemStudy()
  },

  computed: {
    ...mapState(['id'])
  },

  methods: {
    async getexemStudy () {
      this.$toast.loading({
        message: '获取中...',
        forbidClick: true,
        duration: 0
      })
      const Qid = this.$route.params.id
      const { data } = await hisoryed({
        tetstpaperlogid: Qid,
        userid: this.id
      })
      if (data) {
        this.dataisshow = true
        this.$toast.clear()
      }
      this.detail = data.testpaper
      // this.testpaperresult = data.testpaperresult
      this.shijuan = data.testpaperresult
      this.shijuan.forEach((item) => {
        if (item.type === '1') {
          this.xuZeList = item
          console.log(this.xuZeList, 12345)
        } else if (item.type === '2') {
          this.panDuanList = item
        } else if (item.type === '3' && item.sort === 3) {
          this.yueDuList = item
        } else if (item.type === '4') {
          this.tingliList = item
        } else if (item.type === '3' && item.sort === 4) {
          this.yueDuList1 = item
        } else if (item.type === '3' && item.sort === 5) {
          this.yueDuList2 = item
        }
      })
    },
    play () {
      this.$refs.audio.play()
    }
  }
}
</script>

<style scoped lang='less'>
.nav{
  background-color: white  !important;
}
.img {
  width: 750px;
  height: 450px;
}
.zou {
  font-size: 12px;
}
.box {
  width: 650px;
  margin: 0 auto;
}
.audio_a {
  position: relative;
  height: 54px;
}
audio  {
  width: 400px;
  height: 54px;
}
.audio {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 300px;
  z-index: 20;
}
.questiontype{
  font-size: 16px;
  background-color: #f3f3f3;
  padding-top:10px;
  padding-left:10px;
  color:#666666;
  font-weight:normal;
  margin-top:27px
}
.okscore{
  display:block;
  font-size: 16px;
  background-color: #f3f3f3;
  padding-top:8px;
  padding-top:8px;
  padding-left:15px;
  color:#666666;
  margin-bottom:18px ;

}
.tit{
  margin-bottom:10px;
}
.moreselect  div{
  margin-bottom:10px

}
.btn{
  display:flex;
  justify-content:center;
}
.zhong {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  font-weight: 700;
  margin: 0 auto;
}
.p1 {
  background-color: #eee;
}
.p2 {
  background-color: #fff;
}
.answer {
  margin-top: 30px;
  margin-bottom: 50px;
  background-color: skyblue;
}
</style>
